<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>actionHelp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>

    <script>
        function loadActionHelp(){
            $.ajax({
                type:"GET",  
                url:"http://127.0.0.1:8080/item",  
                //data:"datas="+datas;//要发送的数据  
                                        
                //object是后台传过来的java list数据集合  
                success:function(objects){                         
                    console.log(objects);
                    //1,获取上面id为cloneTr的tr元素  
                        var tr = $("#cloneTr");  

                    $.each(objects, function(index,item){                              
                            //克隆tr，每次遍历都可以产生新的tr                              
                            var clonedTr = tr.clone();  
                            var _index = index;  
                            
                            //循环遍历cloneTr的每一个td元素，并赋值  
                            clonedTr.children("td").each(function(inner_index){  
                                
                                    //根据索引为每一个td赋值  
                                            switch(inner_index){  
                                                case(0):   
                                                    $(this).html(_index);  
                                                    break;  
                                                case(1):  
                                                    $(this).html(item.Name);  
                                                    break;  
                                                case(2):  
                                                    $(this).html(item.Path);  
                                                    break;  
                                                case(3):  
                                                    $(this).html(item.Account);  
                                                    break;  
                                                case(4):  
                                                    $(this).html(item.PassWord);  
                                                    break;  
                                
                                        }//end switch                          
                            });//end children.each  
                        
                        //把克隆好的tr追加原来的tr后面  
                        clonedTr.insertAfter(tr);  
                        });//end $each  
                        $("#cloneTr").hide();//隐藏id=clone的tr，因为该tr中的td没有数据，不隐藏起来会在生成的table第一行显示一个空行  
                        $("#generatedTable").show();  
                }//end success
            })
        }
    </script>
</head>

<style>
    td tr th{
        border:1px solid red
    }
</style>

<body onload="loadActionHelp()">
    <table id="generatedTable" style ="border:1px solid red; display: none;">  
                <thead>  
                    <tr>  
                        <th style=''>序号</th>  
                        <th style=''>名称</th>  
                        <th style=''>地址</th>  
                        <th style=''>账号</th>  
                        <th style=''>密码</th>                               
                    </tr>  
                </thead>  
                <tbody>  
                    <tr id="cloneTr">  
                    <td></td>  
                    <td></td>  
                    <td></td>  
                    <td></td>   
                    <td></td>   
                    </tr>  
                </tbody>  
    </table>
</body>
</html>